<template>
  <div class="container">
    <div class="limiter">
      <div
        class="container-login100"
        style="background-image: url('/assets/images/bg.jpg')"
      >
        <div class="wrap-login100 p-t-190 p-b-30">
          <van-form @submit="login" class="login100-form validate-form">
            <div class="login100-form-avatar">
              <img src="/assets/images/avatar-01.jpg" alt="AVATAR" />
            </div>

            <span class="login100-form-title p-t-20 p-b-45">Hello Login</span>

            <div
              class="wrap-input100 validate-input m-b-10"
              data-validate="请输入邮箱"
            >
              <input
                class="input100"
                type="email"
                name="email"
                placeholder="邮箱"
                autocomplete="off"
                v-model="formData.email"
              />
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-user"></i>
              </span>
            </div>

            <div
              class="wrap-input100 validate-input m-b-10"
              data-validate="请输入密码"
            >
              <input
                class="input100"
                type="password"
                name="pass"
                placeholder="密码"
                v-model="formData.pass"
              />
              <span class="focus-input100"></span>
              <span class="symbol-input100">
                <i class="fa fa-lock"></i>
              </span>
            </div>

            <div class="container-login100-form-btn p-t-10">
              <button class="login100-form-btn">登 录</button>
            </div>
            <!-- 
                        <div class="text-center w-full p-t-25 p-b-230">
                            <a href="index.html#" class="txt1">忘记密码？</a>
                        </div> -->

            <div class="text-center w-full">
              <router-link class="txt1" to="/user/base/register">
                立即注册
                <i class="fa fa-long-arrow-right"></i>
              </router-link>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      formData: {
        email: "",
        pass: "",
      },
    };
  },
  methods: {
    login() {
      if (this.formData.email === null || this.formData.email === "") {
        this.$notify({
          type: "warning",
          message: "邮箱不能为空",
        });
        return false;
      }

      if (this.formData.pass === null || this.formData.pass === "") {
        this.$notify({
          type: "warning",
          message: "密码不能为空",
        });
        return false;
      }
      // 正则
      let EmailReg =
        /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;

      if (!EmailReg.test(this.formData.email)) {
        this.$notify({
          type: "warning",
          message: "邮箱格式错误,请重新输入",
          duration: 1000,
        });
        return false;
      }

      this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 1500,
        onClose: async () => {
          let res = await this.$api.login({ data: this.formData });

          // console.log(res)
          if (res.code === 1) {
            this.$notify({
              type: "success",
              message: res.msg,
              duration: 1500,
              onClose: () => {
                // TODO 设置cookies
                this.$cookies.set("ShopUser",res.data);
                this.$router.push(res.url);
              },
            });

            // sessionStorage.setItem("ShopUser", this.$cookies.get("ShopUser"));
          } else {
            this.$notify({ type: "danger", message: res.msg, duration: 1500 });
          }
        },
      });
    },
  },
};
</script>

<style scoped>
@import url("/assets/css/util.css");
@import url("/assets/css/main.css");

.container-login100::before{
  background: transparent;
}
</style>
